<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>柱状图</title>

    <!-- <script src="/js/jquery-1.4.2.js"></script> -->
    <script src="/lib/echarts.min.js"></script>
    <script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>

</head>
<body>
<div id="main" style="width: 800px;height: 500px;"></div>


<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);

    $.ajax({
        "url": "http://localhost:8080//flowerKind/echartsBar",
        "data": {},
        "success": function (result) {

                var timeList = [];
                var timeCount = [];

                for(var i = 0;i<result.data.length;i++){
                    timeCount.push(result.data[i].count_time);
                    timeList.push(result.data[i].create_time);    
                } 


            option = {
                xAxis: {
                    type: 'category',
                    data: timeList
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data:timeCount,
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,		//开启显示
                                    position: 'top',	//在上方显示
                                    textStyle: {	    //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        },
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            };

            myChart.setOption(option);
        },
        // "dataType": "json"
    });
</script>
</body>
</html>